<template>
  <div>
    <!-- 尺寸设置 -->
    <div>
      <h3>size:</h3>
      <p class="goods-size">
        <span>XS</span>
        <span>S</span>
        <span>M</span>
        <span>ML</span>
        <span>L</span>
        <span>XL</span>
        <span>XXL</span>
      </p>
    </div>
    <!-- 头部长标题 -->
    <div class="goods-title">Leave a star on Github if this respository was useful :)</div>
    <!-- star -->
    <div>
      <button>
        <van-icon name="star" /><b>Star</b>
      </button>
    </div>
    <p>16 Product(s) found</p>
    <p>
      Order by <button @click="onClick">购物车</button>
      <select name="" id="select" @change="change">
        <option value="0">价格筛选</option>
        <option value="1">价格升序</option>
        <option value="2">价格降序</option>
      </select>
    </p>
    <!-- 商品表格 -->
    <div class="box">
      <GoodsList 
      v-for="(item,index) in $store.state.goodsList"
      :key="index"
      :item="item"
      @carClick="carClick"
      />
    </div>
  </div>
</template>

<script>
import GoodsList from '../components/GoodsList'
export default {
  components:{
    GoodsList
  },
  methods:{
    change(index){
      let cids = index.target.value
      this.$store.dispatch('GOODSPRICE',cids)
    },
    carClick(item){
      this.$store.dispatch('CARSLIST',item)
    },
    onClick(){
      this.$router.push('/about')
    }
  }
}
</script>

<style scoped>
.goods-size{
  width: 100%;
  text-align: center;
}
.goods-size span{
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  background: #ECECEC;
  font-size: 14px;
  margin: 5px;
}
.goods-title{
  font-size: 14px;
  color: #999;
}
#select{
  width: 120px;
  height: 30px;
  border: 1px solid #999;
  outline: none;
}
.box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>